<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{padding: 0; margin: 0;}
        h1{
            position: absolute;
            top: 0;
        }
        div{
            width: 100px;
            height:100px;
            padding: 20px;
            box-sizing: border-box;
        }
        .relative{
            background-color: #f2f2f2;
            margin-top: 100px;
        }
        .absolute{
            background-color: orange;
            position: absolute;
            left: 150px;
            top: 100px;
        }
        .fixed{
            left: 450px;
            top: 100px;
            position: fixed;
            background-color: blue;
            color: #fff;
        }
        .sticky{
            position: sticky;
            background-color: pink;
            top: 0;
            left: 350px;
            margin-top: -100px;
            transform: translateX(-50%);
        }
        .center{
            background-color: forestgreen;
            position: center;
        }
    </style>
</head>
<body>
    <h1>Position(<small>chrome: 61.0.3163.100</small>)</h1>
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
    <div class="fixed">fixed</div>
    <div class="sticky">sticky</div>
    <div class="center">center</div>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>